<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="author" content="">

	<title>
		Tools-EChart-Guidelines
	</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="barChart" style="height: 400px"></div>
<div id="pieChart" style="height: 400px;"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
	// 路径配置
	require.config({
		paths: {
			echarts: 'http://echarts.baidu.com/build/dist'
		}
	});

	// 使用
	require(
			[
				'echarts',
				'echarts/chart/pie', //
				'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
			],
			function (ec)
			{
				// 基于准备好的dom，初始化echarts图表
				var barChart = ec.init(document.getElementById('barChart'));

				var barOption = {
					tooltip: {
						show: true
					},
					legend: {
						data: ['销量']
					},
					xAxis: [
						{
							type: 'category',
							data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
						}
					],
					yAxis: [
						{
							type: 'value'
						}
					],
					series: [
						{
							"name": "销量",
							"type": "bar",
							"data": [5, 20, 40, 10, 10, 20]
						}
					]
				};

				// 为echarts对象加载数据
				barChart.setOption(barOption);

				// 基于准备好的dom，初始化echarts图表
				var pieChart = ec.init(document.getElementById('pieChart'));

				var dataStyle = {
					normal: {
						label: {show: false},
						labelLine: {show: false}
					}
				};
				var placeHolderStyle = {
					normal: {
						color: 'rgba(0,0,0,0)',
						label: {show: false},
						labelLine: {show: false}
					},
					emphasis: {
						color: 'rgba(0,0,0,0)'
					}
				};

				var pieOption = {
					title: {
						text: '你幸福吗？',
						subtext: 'From ExcelHome',
						sublink: 'http://e.weibo.com/1341556070/AhQXtjbqh',
						x: 'center',
						y: 'center',
						itemGap: 20,
						textStyle: {
							color: 'rgba(30,144,255,0.8)',
							fontFamily: '微软雅黑',
							fontSize: 35,
							fontWeight: 'bolder'
						}
					},
					tooltip: {
						show: true,
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					legend: {
						orient: 'vertical',
						x: document.getElementById('pieChart').offsetWidth / 2,
						y: 45,
						itemGap: 12,
						data: ['68%的人表示过的不错', '29%的人表示生活压力很大', '3%的人表示“我姓曾”']
					},
					toolbox: {
						show: true,
						feature: {
							mark: {show: true},
							dataView: {show: true, readOnly: false},
							restore: {show: true},
							saveAsImage: {show: true}
						}
					},
					series: [
						{
							name: '1',
							type: 'pie',
							clockWise: false,
							radius: [125, 150],
							itemStyle: dataStyle,
							data: [
								{
									value: 68,
									name: '68%的人表示过的不错'
								},
								{
									value: 32,
									name: 'invisible',
									itemStyle: placeHolderStyle
								}
							]
						},
						{
							name: '2',
							type: 'pie',
							clockWise: false,
							radius: [100, 125],
							itemStyle: dataStyle,
							data: [
								{
									value: 29,
									name: '29%的人表示生活压力很大'
								},
								{
									value: 71,
									name: 'invisible',
									itemStyle: placeHolderStyle
								}
							]
						},
						{
							name: '3',
							type: 'pie',
							clockWise: false,
							radius: [75, 100],
							itemStyle: dataStyle,
							data: [
								{
									value: 3,
									name: '3%的人表示“我姓曾”'
								},
								{
									value: 97,
									name: 'invisible',
									itemStyle: placeHolderStyle
								}
							]
						}
					]
				};

				pieChart.setOption(pieOption);
			}
	);
</script>
</body>
</html>